<script setup>
import { ref, onMounted, reactive } from 'vue';
import { userListApi, saveUsertApi, usertDetailApi, updateUserApi, deleteUserApi } from'@/apis/system/user.js';
import SingleUpload from '@/components/upload/singleUpload.vue';
import { allRoleApi } from'@/apis/system/role.js';
import { Search, Delete, EditPen, Plus, Refresh } from '@element-plus/icons-vue'

// 图片分类
const uploadType = "avatar";

const params = reactive({
  page: 1,
  pageSize: 10,
  nickName: '',
})

const loading = ref(false)
const users = ref({})
const userList = async() => {
    loading.value = true
    const res = await userListApi(params)
    users.value = res.data
    loading.value = false
}

// 查询
const handleQuery = () => {
  userList()
}

// 返回刷新数据
const handleRefresh = () => {
  params.nickName = '';
  params.page= 1;
  params.pageSize=10;
  userList()
}

const dialogFormVisible = ref(false)
const form = ref({})
const isSave = ref(false)
let title = '添加用户'
const handleAddOrUpdate = async(id) => {
    if(id === null){
      // 添加
      isSave.value = true;
      form.value = {}
      title = '添加用户'
      dialogFormVisible.value = true;
    } else {
      isSave.value = false;
      form.value = {}
      const res = await usertDetailApi(id)
      form.value = res.data
      dialogFormVisible.value = true;
    }
}

// 保存或修改
const saveOrUpdate = () => {
  if(form.value.id){
    updateUserApi(form.value).then(res => {
      if(res.code === 0){
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        userList()
        dialogFormVisible.value = false
      }
    })
  }else {
    saveUsertApi(form.value).then(res => {
      if(res.code === 0){
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        userList()
        dialogFormVisible.value = false
      }
    })
  }
}

// 获取所有角色
const roles = ref([])
const allRole = async() => {
  const res = await allRoleApi();
  roles.value = res.data;
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此条数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    deleteUserApi([id]).then(res => {
      if(res.code === 0){
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        userList();
      }
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
       message: '操作取消',
    })
  })
}

const disabled = ref(false)
const background = ref(false)
const handleSizeChange = (val) => {
    params.pageSize = val;
    params.page = 1;
    userList()
}
const handleCurrentChange = (val) => {
    params.page = val;
    userList()
}

onMounted(() => {
    userList()
    allRole()
})
</script>

<template>
    <div class="container" v-loading="loading">
        <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">昵称</span>
        <el-input v-model="params.nickName" placeholder="请输入要查询的昵称" clearable style="width: 280px;" />
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleQuery">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加用户</el-button>
      </el-col>
    </el-row>

    <el-row>
        <el-table :data="users.list" border style="width: 100%">
          <el-table-column prop="username" label="账号" align="center"/>
            <el-table-column prop="nickName" label="昵称" align="center"/>
            <el-table-column prop="phone" label="手机号" align="center"/>
            <el-table-column label="性别" align="center">
                <template v-slot="scope">
                    {{ scope.row.sex===1? '女':scope.row.sex===0?'男':'未知' }}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template v-slot="scope">
                    <el-tag :type="scope.row.status===0? 'success':'danger'">{{ scope.row.status===0? '正常':'禁用' }}</el-tag>
                    
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="220">
                <template v-slot="scope">
                    <el-button type="primary" text size="small" :icon="EditPen" @click="handleAddOrUpdate(scope.row.id)">修改</el-button>
                    <el-button type="primary" text size="small" :icon="Delete" @click="handleRemove(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <div class="pageination">
            <el-pagination
                v-model:current-page="users.page"
                v-model:page-size="users.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="users.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

    <el-dialog v-model="dialogFormVisible" :title="title" style="width: 35%;">
    <el-form :model="form" label-width="100px">
      <el-form-item label="账号" v-if="isSave">
        <el-input v-model="form.username" autocomplete="off" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="昵称" >
        <el-input v-model="form.nickName" autocomplete="off" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="手机号码" >
        <el-input v-model="form.phone" autocomplete="off" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="性别" >
        <el-select v-model="form.sex" placeholder="请选择">
          <el-option label="男" :value="0" />
          <el-option label="女" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" >
        <el-select v-model="form.status" placeholder="请选择">
          <el-option label="启用" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="密码" v-if="isSave">
        <el-input v-model="form.password" autocomplete="off" placeholder="不输入默认为123456" type="password" show-password/>
      </el-form-item>
      <el-form-item label="头像">
        <SingleUpload v-model:picture="form.avatar" :uploadType="uploadType" :width="150" :height="150"
          ref="singleUploadComponent"></SingleUpload>
      </el-form-item>
      <el-form-item label="角色">
        <el-select
          v-model="form.roleIds"
          multiple
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择角色"
          style="width: 240px"
        >
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" autocomplete="off" placeholder="请输入" type="textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
        
    </div>
</template>

<style scoped lang='scss'>

</style>